<template>
  <div id="login">
    <Row type='flex' justify='center'>
      <Col span="24">
        <h1>权限管理系统登录</h1>
      </Col>
      <Col span="8">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="登录名" prop="loginName">
            <Input v-model="formValidate.loginName" placeholder="请输入登录名"></Input>
          </FormItem>
          <FormItem label="密码" prop="passWord">
            <Input type='password' v-model="formValidate.passWord" placeholder="请输入密码"></Input>
          </FormItem>
          <FormItem class="actButton">
            <Button type="success" @click="handleSubmit('formValidate')">提交</Button>
            <Button type="warning" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formValidate: {
        loginName: '',
        passWord: ''
      },
      ruleValidate: {
        loginName: [
          {
            required: true,
            message: '登录名不能为空'
          }
        ],
        passWord: [
          {
            required: true,
            message: '密码不能为空'
          }
        ]
      }
    }
  },
  computed: {
    name () {
      return this.getCookie('token')
    }
  },
  methods: {
    getMenu (roles) {
      // this.setSession('token', roles)
      this.setCookie('token', roles)
      this.$emit('login')
    },
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formValidate.loginName === `client`) {
            this.getMenu(`client`)
          } else if (this.formValidate.loginName === `root`) {
            this.getMenu(`root`)
          } else {
            return this.$Message.error(`请输入正确的登录名(client或者root)`)
          }
          this.$Message.success('登录成功!')
        } else {
          this.$Message.error('登录失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style lang="scss">
  #login {
    margin-top: 60px;
    h1 {
      text-align: center;
      margin-bottom: 20px;
    }
    .actButton {
      text-align: center;
      .ivu-form-item-content {
        margin-left: 0px !important
      }
    }
  }
</style>
